<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/header.css">

<!-- 头部 -->
<div class="container-fulid header">
    <div class="p-head">
        <div class="container">
            <div class="a-wrap">
                <img src="./images/search (1).png" alt="">
                <div class="wrap_cont">
                    <div class="top">
                        <input type="text" placeholder="请输入商品关键字" autofocus>
                    </div>
                    <div class="bottom">
                        <ul>
                            <li class="first"><a href="#">搜索热词:</a></li>
                            <li><a href="#">双萃</a></li>
                            <li><a href="#">精华</a></li>
                            <li><a href="#">面霜</a></li>
                            <li><a href="#">精华水</a></li>
                            <li><a href="#">眼霜</a></li>
                            <li><a href="#">护手霜</a></li>
                            <li><a href="#">洁面</a></li>
                        </ul>
                    </div>
                </div>
                <i id="i">x</i>
            </div>
            <div class="logo">
                <img src="./images/logo.svg" alt="">
            </div>
            <div class="right" style="width: 170px;">
                <div class="minilogin">
                    <img src="./images/gwc.png" alt="">
                    <a href="shopping.html">购物车</a>
                    <div class="main">
                        <p>购物车中还没有商品，赶紧加载吧！</p>
                    </div>
                </div>
                <div class="minicart">
                    <img src="./images/dl.png" alt="">
                    <a href="./login.html" class="login">登录</a>
                </div>
            </div>
        </div>
    </div>
    <div class="p-nav">
        <div class="container">
            <ul>
                <li class="cateItem"><a href="index.html">首页</a></li>
                <li class="cateItem"><a href="">肌肤护理</a>
                    <div class="cateBox" style="margin-left: -450px; width: 1202px; height: 332px;">
                        <ul class="cateBoxs" style="height: 332px;">
                            <h4><a href="list.html">明星系列</a></h4>
                            <li><a href="list.html">抗老</a></li>
                            <li><a href="list.html">美白</a></li>
                            <li><a href="list.html">保湿</a></li>
                            <li><a href="list.html">提拉</a></li>
                            <li><a href="list.html">清洁</a></li>
                            <li><a href="list.html">舒缓</a></li>
                        </ul>
                        <ul class="cateBoxs" style="height: 332px;">
                            <h4><a href="list.html">面部系列</a></h4>
                            <li><a href="list.html">洁面/卸妆</a></li>
                            <li><a href="list.html">精华水/化妆水</a></li>
                            <li><a href="list.html">卓效精华</a></li>
                            <li><a href="list.html">眼霜/眼部精华</a></li>
                            <li><a href="list.html">面霜/护理油</a></li>
                            <li><a href="list.html">颈霜/护唇霜</a></li>
                            <li><a href="list.html">面霜</a></li>
                            <li><a href="list.html">隔离防晒霜</a></li>
                        </ul>
                        <ul class="cateBoxs" style="height: 332px;">
                            <h4><a href="list.html">身体系列</a></h4>
                            <li><a href="list.html">身体乳/霜</a></li>
                            <li><a href="list.html">清洁/去角质</a></li>
                            <li><a href="list.html">洗发沐浴</a></li>
                            <li><a href="list.html">护理油</a></li>
                            <li><a href="list.html">香氛/香薰蜡烛</a></li>
                        </ul>
                        <ul class="cateBoxs" style="height: 332px;">
                            <h4><a href="list.html">纹路系列</a></h4>
                            <li><a href="list.html">新生之美</a></li>
                            <li><a href="list.html">抚纹身体乳</a></li>
                            <li><a href="list.html">身体护理油</a></li>
                        </ul>
                        <ul class="cateBoxs" style="height: 332px;">
                            <h4><a href="list.html">男士系列</a></h4>
                            <li><a href="list.html">男士洗面奶/爽肤水</a></li>
                            <li><a href="list.html">男士乳液</a></li>
                            <li><a href="list.html">男士沐浴露</a></li>
                        </ul>
                        <ul class="cateBoxs">
                            <img src="./images/99ce3ce.jpg" alt="">
                            <p class="title">UV小白盾</p>
                            <p class="desc">「5P」 防护技术
                            </p>
                            <a href="#">了解详情</a>
                        </ul>
                    </div>
                </li>
                <li class="cateItem"><a href="">彩妆系列</a>
                    <div class="cateBox" style="margin-left: -450px; width: 1002px; height: 332px;">
                        <ul class="cateBoxs" style="height: 332px;">
                            <h4><a href="list.html">面部彩妆</a></h4>
                            <li><a href="list.html">妆前底霜</a></li>
                            <li><a href="list.html">粉底</a></li>
                            <li><a href="list.html">遮瑕</a></li>
                            <li><a href="list.html">腮红</a></li>
                            <li><a href="list.html">美妆工具</a></li>
                
                        </ul>
                        <ul class="cateBoxs" style="height: 332px;">
                            <h4><a href="list.html">眼部彩妆</a></h4>
                            <li><a href="list.html">睫毛膏</a></li>
                            <li><a href="list.html">眼影</a></li>
                            <li><a href="list.html">眼线笔</a></li>
                            <li><a href="list.html">眉笔</a></li>
                            <li><a href="list.html">眼部卸妆水</a></li>
                        
                        </ul>
                        <ul class="cateBoxs" style="height: 332px;">
                            <h4><a href="list.html">唇部彩妆</a></h4>
                            <li><a href="list.html">唇膏</a></li>
                            <li><a href="list.html">唇彩</a></li>
                            <li><a href="list.html">护唇油</a></li>
                            <li><a href="list.html">护唇膏</a></li>
                        
                        </ul>
                        <ul class="cateBoxs">
                            <img src="./images/cz1.jpg" alt="">
                            <p class="title">果冻护唇油</p>
                            <p class="desc">抚纹 弹润 爆水嫩
                            </p>
                            <a href="#">了解详情</a>
                        </ul>
                        <ul class="cateBoxs">
                            <img src="./images/cz2.jpg" alt="">
                            <p class="title">99粉底液</p>
                            <p class="desc">24H真正持妆
                            </p>
                            <a href="#">了解详情</a>
                        </ul>
                    </div>
                </li>
                <li class="cateItem"><a href="">特别活动</a></li>
                <li class="cateItem"><a href="">明星商品</a></li>
                <li class="cateItem"><a href="">试用中心</a></li>
                <li class="cateItem"><a href="" class="lic">服务与spa</a>
                    <div class="cateBox " style="margin-left: -300px; width: 602px; height:119px;">
                        <ul class="cateBoxs" style="height: 119px;">
                            <h4><a href="list.html">美妍中心</a></h4>
                            <li><a href="list.html">Beauty School</a></li>
                        </ul>
                        <ul class="cateBoxs" style="height: 119px;">
                            <h4><a href="#">美妍spa</a></h4>
                            <li><a href="list.html">spa护理</a></li>
                        </ul>
                        <ul class="cateBoxs" style="height: 119px;">
                            <h4><a href="list.html">美妍俱乐部</a></h4>
                            <li><a href="list.html">会员日兑礼</a></li>
                            <li><a href="list.html">兑会员正装礼</a></li>
                        </ul>
                    </div>
                </li>
                <li class="cateItem"><a href="" class="lic">Clarins故事</a>
                    <div class="cateBox" style="margin-left: -300px; width: 602px; height: 119px;">
                        <ul class="cateBoxs" style="height: 119px;">
                            <h4><a href="list.html">价值与历史</a></h4>
                            <li><a href="list.html">爱上娇诗韵的10个美丽理由</a></li>
                        </ul>
                        <ul class="cateBoxs" style="height: 119px;">
                            <h4><a href="#">美妍承诺</a></h4>
                        </ul>
                        <ul class="cateBoxs">
                            <h4><a href="#">美妍植物</a></h4>
                        </ul>

                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>
<script src="./js/jQuery.js"></script>
<script src="./js/cookie.js"></script>
<script>
    //显示搜索框
    $(".a-wrap").click(function () {
        $(this).children().show()
        $(".p-nav").hide();
        // $(".p-nav").css({
        //     display:"none"
        // });
        $("#i").show();
    });
    $(".bottom li").click(function () {
        var a = $(this).text();
        // console.log(a);
        $(".top input").val(a);
    });
    //隐藏搜索框
    $("#i").click(function () {
        // console.log($(".wrap_cont"));
        $(".wrap_cont").stop().fadeOut();
        $(this).stop().fadeOut();
        $(".p-nav").show(function () {
            $(".p-nav").show(function () {

            });//同步异步问题
        });
    });

    // 购物车
    $(".goods .box  .box-good li .imgs").mouseenter(function () {
        $(this).children(".p").slideDown();
    })
    $(".goods .box  .box-good li .imgs").mouseleave(function () {
        $(this).children(".p").slideUp();
    })
    //显示二级菜单
    $(".cateItem").mouseenter(function () {
        $(this).children(".cateBox").show();
    });
    $(".cateItem").mouseleave(function () {
        $(this).children(".cateBox").hide();
    });
    // 购物车
    $(".minilogin").mouseover(function () {
        $(this).children(".main").show();
    })
    $(".minilogin").mouseout(function () {
        $(this).children(".main").hide();
    })
    if(getCookie("username") != ""){
      $(".login").html("个人中心");
    }else{
        $(".login").html("登录");
    }
    
</script>